<template>
  <div class="one">
    <h1 style="font-size: 30px">字典维护>字典数据配置</h1>
    <br />
    字典名称:
    <el-input
      v-model="input3"
      class="w-50 m-2"
      size="small"
      placeholder="请输入..."
      :prefix-icon="Search"
      style="width: 300px; height: 35px; margin-bottom: 23px; margin-top: 19px"
    />

    字典标签:
    <el-input
      v-model="input1"
      class="w-50 m-2"
      size="small"
      placeholder="请输入..."
      :prefix-icon="Search"
      style="width: 300px; height: 35px"
    />

    字典组:
    <el-input
      v-model="input2"
      class="w-50 m-2"
      size="small"
      placeholder="请输入..."
      :prefix-icon="Search"
      style="width: 300px; height: 35px"
    />
    <br />

    <div class="block" style="display: inline-block">
      <span class="demonstration">创建时间:</span>
      <el-date-picker
        v-model="value1"
        type="datetime"
        placeholder="Select date and time"
      />
    </div>
    <el-button style="margin-left: 800px" @click="reset">重置</el-button>
    <el-button type="primary">查询</el-button>
    <el-button type="primary" @click="dialogFormVisible = true">
      新增
    </el-button>
    <!-- 新增弹窗 -->
    <el-dialog v-model="dialogFormVisible" title="新增/修改字典数据">
      <el-form>
        <el-form-item label="No" :label-width="formLabelWidth">
          <el-input v-model="form.date" autocomplete="off" />
        </el-form-item>
        <el-form-item label="字典名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="字典类型" :label-width="formLabelWidth">
          <el-input v-model="form.address" autocomplete="off" />
        </el-form-item>
        <el-form-item label="创建时间/字典组" :label-width="formLabelWidth">
          <el-input v-model="form.operation" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="updatafrom"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>

    <el-table :data="filterTableData" style="width: 100%">
      <el-table-column prop="date" label="No" width="180" />
      <el-table-column prop="name" label="字典名称" width="180" />
      <el-table-column prop="address" label="字典类型" width="180" />
      <el-table-column prop="operation" label="创建时间 字典组" width="180" />
      <el-table-column prop="" label="" width="180" />
      <el-table-column align="right">
        <!-- <template #header> </template> -->
        <template #default="scope">
          <el-button size="small" @click="dialogFormVisible = true"
            >修改</el-button
          >
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
/* eslint-disable */
import { computed, ref, reactive } from "vue";

// import { ElMessage, ElMessageBox } from "element-plus";
// import { Action } from "element-plus";
import { Search } from "@element-plus/icons-vue";

const value1 = ref("");
const input1 = ref("");
const input2 = ref("");
const input3 = ref("");
const input4 = ref("");
// 重置
const reset = () => {
  input1.value = "";
  input2.value = "";
  input3.value = "";
  input4.value = "";
};

const search = ref("");
const filterTableData = computed(() =>
  tableData.info.filter(
    (data) =>
      !search.value ||
      data.name.toLowerCase().includes(search.value.toLowerCase())
  )
);
const handleEdit = (index, row) => {
  //   console.log(index, row);
};
const handleDelete = (index, row) => {
  //   console.log(index, row);
  tableData.info = tableData.info.filter((item) => item.date !== row.date);
};

const tableData = reactive({
  info: [
    {
      date: "001",
      name: "Tom",
      address: "No. 189",
      operation: "",
    },
    {
      date: "002",
      name: "tim",
      address: "No.2222",
      operation: "",
    },
    {
      date: "00333",
      name: "anny",
      address: "No.88888",
      operation: "1212",
    },
  ],
});
// const dialogTableVisible = ref(false);
const dialogFormVisible = ref(false);

const formLabelWidth = "140px";

const form = reactive({
  date: "",
  name: "",
  address: "",
  operation: "",
});
const updatafrom = () => {
  dialogFormVisible.value = false;
  // console.log(form);
  tableData.info.push(form);
  //   tableData.info.push(form.updatainfo.value);
};
</script>

<style scoped>
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
